<template>
    <div class="default-main  ba-table-box">
        <el-row v-loading="state.loading" :gutter="20">
            <el-col class="xs-mb-20" :xs="24" :sm="24">
                <el-card>
                    <el-form v-if="!state.loading" ref="formRef" :model="state" :rules="state.rules" label-position="top" :key="state.formKey">


                        <el-row :gutter="24">
                            
                            <el-col :span="6">
                                <div class="config-form-item">
                                    <FormItem 
                                    label="商品品牌" 
                                    type="remoteSelect" 
                                    v-model="state.brand_id" 
                                    prop="goods_brand_id" 
                                    :input-attr="{ 
                                        params: { isTree: true, treeAll: true }, 
                                        pk: 'id', 
                                        field: 'name', 
                                        'remote-url': '/user/goods.brand/userBrand',
                                    }" 
                                    placeholder="请选择品牌" 
                                    />
                                    
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="config-form-item">
                                    <FormItem 
                                    label="季度编码" 
                                    type="remoteSelect" 
                                    v-model="state.quarter_code" 
                                    prop="quarter_code" 
                                    :input-attr="{ 
                                        params: { isTree: true, treeAll: true }, 
                                        pk: 'quarter_code', 
                                        field: 'quarter_code', 
                                        'remote-url': '/user/goods.Goods/QuarterCodeList?brand_id=' + state.brand_id,
                                    }" 
                                    placeholder="请选择季度编码" 
                                    />
                                    
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="config-form-item">
                                    <span class="btn ml-12" style="width: 90px; margin-top: 31px;" @click="selectGoods">选择商品</span>
                                </div>
                            </el-col>
                            
                        </el-row>
                        <el-row :gutter="24">
                            
                            <el-col :span="6">
                                <div class="config-form-item">
                                    <FormItem label="主播名称"  type="string" v-model="state.anchor_name" prop="anchor_name" placeholder="请输入主播名称" />
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="config-form-item">
                                    <FormItem label="直播时间" type="datetime" v-model="state.live_time" prop="live_time" placeholder="请选择直播时间" />
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="config-form-item">
                                    <span class="btn ml-12 btn-success" style="width: 90px; margin-top: 31px;" @click="generateLive">生成直播</span>
                                </div>
                            </el-col>
                        </el-row>
                        
                        <!-- <el-button type="primary" @click="onSubmit()">{{ t('Save') }}</el-button> -->
                    </el-form>
                </el-card>
            </el-col>
            <!-- <el-col :xs="24" :sm="12">
                <el-card header="其他设置">
                    <div class="config-form-item">
                        <FormItem label="客户名称" label-position="top" type="number" v-model="state.weigh" prop="name" placeholder="请选择客户" />
                    </div>
                </el-card>
            </el-col> -->
        </el-row>

        <SelectGoods 
        v-if="state.selectGoods" 
        :show="state.selectGoods" 
        :user_id="state.user_id"
        :brand_id="state.brand_id"  
        :quarter_code = "state.quarter_code"
        @hideSelectGoods="hideSelectGoods" 
        @loadOrderTemp="loadOrderTemp"
        />

        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <!-- <TableHeader
            
            :buttons="['delete']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('live.quick Search Fields') })"
        >
            <template #btnBefore>
                <span style="" class="btn btn-success" @click="router.push({ path: 'live/add' })">创建直播</span>
            </template>
        </TableHeader> -->

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        <Table ref="tableRef" :pagination="false">
            <template #size-stock>
                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                <el-table-column prop="id" label="尺码/库存" width="270" align="center">
                    <template #default="scope">
                        <div style="">
                            <table border="1" style="width: 100%; text-align: center; border-color: #fff; font-weight: normal;" cellspacing="0" >
                                <tr>
                                    <td v-for="(item, key) in scope.row.size_with_stock" :key="key" style="width: 54px;" width="100" v-html="item.size"></td>
                                </tr>
                                <tr>
                                    <td v-for="(item, key) in scope.row.size_with_stock" :key="key" style="" v-html="item.stock"></td>
                                </tr>
                            </table>
                        </div>
                    </template>
                </el-table-column>
            </template>
            <template #cycle>
                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                <el-table-column prop="id" label="生产周期" width="180" align="center">
                    <template #default="scope">
                        <div style="">
                            <table border="1" style="width: 100%; text-align: center; border-color: #fff;" cellspacing="0" >
                                <tr>
                                    <td style="width: 50%;">15天</td>
                                    <td style="width: 50%;">30天</td>
                                </tr>
                                <tr>
                                    <td>{{ scope.row.cycle_15 }}</td>
                                    <td>{{ scope.row.cycle_30 }}</td>
                                </tr>
                            </table>
                        </div>
                    </template>
                </el-table-column>
            </template>
        </Table>


    </div>
</template>

<script setup lang="ts">
import { reactive, ref, markRaw, onMounted, provide } from 'vue'
import { defaultOptButtons } from '/@/components/table'
import { useI18n } from 'vue-i18n'
import baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import { FormInstance, ElNotification, ElMessageBox } from 'element-plus'
import SelectGoods from './selectGoods.vue'
import { baTableApi } from '/@/api/common'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'

import router from '/@/router'
import { generateOrderApi } from '/@/api/frontend/order/place_order'

import OrderNum from './render/order_num.vue';

const formRef = ref<FormInstance>()


const state = reactive({
    user_id: 0, // 用户ID
    brand_id: 0, //商品品牌ID
    quarter_code: '', // 季度编码
    selectGoods: false, // 选择样品弹出框
    anchor_name: '', // 主播名称
    live_time: '', // 直播时间
})

// 生成直播
const generateLive = () => {
    let param = {
        user_id: state.user_id,
        anchor_name: state.anchor_name,
        live_time: state.live_time,
        type: 0,
    }
    generateOrderApi(param).then((e) => {
        console.log(e)
        if(e.code == 1){
            loadTable();
            
            ElMessageBox.confirm(e.msg, '', {
                confirmButtonText: '返回直播列表',
                cancelButtonText: '继续创建',
                type: 'success',
            }).then(() => {
                router.push({ path: '/user/live' })
            }).catch(() => {

            })

        }else{
            ElNotification({
                message: e.msg,
                type: 'error',
            });
        }
        
    })
}

// 隐藏选择样品弹窗
const hideSelectGoods = () => {
    state.selectGoods = false;
}
// 重新加载直播订单表格
const loadOrderTemp = () => {
    loadTable();
}



const loadTable = () => {
    baTable.getIndex()?.then(() => {
        // baTable.initSort()
        // baTable.dragSort()
    })
}



const selectGoods = () => {
    console.log(state.brand_id)
    
    state.selectGoods = true;
}

defineOptions({
    name: 'live',
})

const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['delete'])
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/user/order.Temp/'),
    {
        pk: 'temp_id',
        column: [
            // { type: 'selection',  align: 'center', operator: false },
            { label: t('品牌名'), prop: 'brand.name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { 
                label: t('图片'), 
                render: "image", 
                prop: 'goods.cover', 
                align: 'center', 
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false,
                width: 120
            },
            { label: t('商品名'), prop: 'goods.name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { 
                label: t('数量'), 
                prop: 'num', 
                align: 'center', 
                operator: 'RANGE', 
                sortable: false,
                render: 'customRender', 
                customRender: markRaw(OrderNum),
            },
            { label: t('颜色'), prop: 'color', align: 'center', render: 'string', operator: false },
            { label: t('官方售价'), prop: 'goods.price', align: 'center', operator: 'RANGE', sortable: false },
            { 
                label: t('供货率'), 
                prop: 'goods.supply_discount', align: 'center', 
                operator: 'RANGE', sortable: false, 
                render: "string" , 
                renderFormatter: (row: TableRow, field: TableColumn, value: any, column: TableColumnCtx<TableRow>, index: number) => {
                    return value == null ? '' : value+'%';
                }
            },
            { label: t('供货价格'), prop: 'goods.supply_price', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: { user_id: null, brand_id: null, goods_ids: null, anchor: null, live_time: 0 },
    }
)

provide('baTable', baTable)



onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.table.filter!.type = 0;
    baTable.mount()
    loadTable();
})
</script>

<style scoped lang="scss">
:deep(.ba-operate-dialog .el-dialog__body){
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
}
:deep(.el-image){
    width: 60px;
    height: unset;
}
:deep(.ba-data-table .margin-left-none){
    margin-left: 0!important;
    margin-bottom: 8px;
    padding: 4px 14px;
}
:deep(.ba-data-table .ml-6){
    margin-left: 0!important;
}


:deep(.ba-data-table .margin-left-none:last-child){
    margin-bottom: 0px;
}
:deep(.table-operate-text){
    padding-left: 0;
}
:deep(.font-size-13){
    font-size: 13px;
}
</style>
